<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" href="../../css/global.css">
		<script src="../../js/getURLParam.js"></script>
		<style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>

	<body>
		<nav id="navid" class="mui-bar mui-bar-tab" style=";background-color: red;display:none;text-align:center;">
			<a id="vclduibi" class="mui-tab-item" href="#">
				<span class="ui-icon-trash" style="color:white">开始对比</span>
			</a>
	</nav>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div>
					<div class="chart" id="barChart" style="padding-bottom: 0px;"></div>
				</div>
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" id="list">
					
				</ul>
				<!--<div id="getmore" style="text-align: center;"><button onclick="getMoreReport()" >点击加载更多</button></div>-->
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/echarts-all.js"></script>
		<script>
			var sessionid=GetQueryString("sessionid");
			var accountid=GetQueryString("accountid");
	        var proversion=GetQueryString("proversion");
	        var vclid=GetQueryString("vclid");
	        var reportdatenow = new Date();
	        var reportdate = reportdatenow.toLocaleDateString().replace("年","-").replace("月","-").replace("日","")
	        var f = document.getElementById("list");
	        var jsondata = "";
	        var iolarr=new Array();
	        var workrunkmarr=new Array();
	        var perworkharr=new Array();
	        var workdatearr=new Array();
	        var pkid=new Array();//选择的设备id,
	        var count=0;
	      	//getreport(); 
	      	function getreport(){
				mui.ajax('../../../APP/vclLogbook', {
					data: {
						param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclId":"' + vclid + '"}}'
					},
					dataType: 'jsonp', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var jsonObj = window.JSON.parse(data);
						f.innerHTML="data";
						 var li ="";
						if (jsonObj.resultCode == "1") {
							//获取返回数据的data
							var resultdata = jsonObj.data
							jsondata = jsonObj.data;
							if (resultdata.length > 0) {
								//获取每台设备的数据
								var table = document.getElementById("table");
								var lengt = resultdata.length;
								var n=0;
								if((lengt-7)>=0){
									for (var i=lengt-1; i >= (lengt-7); i--) {
										li+= '<li style="padding-right:0px" class="mui-table-view-cell mui-media"  id="'+resultdata[n].workdate+'">';
										li+='<img style="height:37px;width:37px" class="mui-media-object mui-pull-right" date-option="0" name="b123" id="a_'+resultdata[n].workdate+'"  src="../../images/drawable-hdpi/select_gray.png"  />'
										li+='<div class="mui-media-body">'
										li+='<P style="font-size: 14px;line-height:18px">'+resultdata[n].workdate+'&nbsp;&nbsp;&nbsp;&nbsp;'+resultdata[n].peroil+'L/100Km</P>'
										li+='<P style="font-size: 14px;line-height:18px"> 里程:'+resultdata[n].runkm+"km&nbsp;&nbsp;&nbsp;油耗量："+resultdata[n].vcloil+'L</P>'
										li+='</div>'
										li+='</li>';
										workdatearr[n]=jsondata[i].workdate;
										if(jsondata[i].vcloil!=null && jsondata[i].vcloil!="--" && jsondata[i].vcloil!=""){
											iolarr[n]=jsondata[i].vcloil;
										}else{
											iolarr[n]="0";
										}
										if(jsondata[i].runkm!=null && jsondata[i].runkm!="--" && jsondata[i].runkm!=""){
											workrunkmarr[n]=jsondata[i].runkm;
										}else{
											workrunkmarr[n]="0";
										}
										if(jsondata[i].peroil!=null && jsondata[i].peroil!="--" && jsondata[i].peroil!=""){
											perworkharr[n]=jsondata[i].peroil;
										}else{
											perworkharr[n]="0";
										}
										n++;
										count++;
									}
								}else{
									for (var i=lengt-1; i >= 0; i--) {
										
										li+= '<li style="padding-right:0px" class="mui-table-view-cell mui-media" id="'+resultdata[n].workdate+'">';
										li+='<img name="b123" style="height:37px;width:37px" class="mui-media-object mui-pull-right" date-option="0" id="a_'+resultdata[n].workdate+'"  src="../../images/drawable-hdpi/select_gray.png"  />'
										li+='<div class="mui-media-body">'
										li+='<P style="font-size: 14px;line-height:18px">'+resultdata[n].workdate+'&nbsp;&nbsp;&nbsp;&nbsp;'+resultdata[n].peroil+'L/100Km</P>'
										li+='<P style="font-size: 14px;line-height:18px"> 里程:'+resultdata[n].runkm+"km&nbsp;&nbsp;&nbsp;油耗量："+resultdata[n].vcloil+'L</P>'
										li+='</div>'
										li+='</li>';
										workdatearr[n]=jsondata[i].workdate;
										if(jsondata[i].vcloil!=null && jsondata[i].vcloil!="--" && jsondata[i].vcloil!=""){
											iolarr[n]=jsondata[i].vcloil;
										}else{
											iolarr[n]="0";
										}
										if(jsondata[i].runkm!=null && jsondata[i].runkm!="--" && jsondata[i].runkm!=""){
											workrunkmarr[n]=jsondata[i].runkm;
										}else{
											workrunkmarr[n]="0";
										}
									if(jsondata[i].peroil!=null && jsondata[i].peroil!="--" && jsondata[i].peroil!=""){
										perworkharr[n]=jsondata[i].peroil;
									}else{
										perworkharr[n]="0";
									}
									n++; 
									count++;
								}
							}
								li+='<li id="a123"class="mui-media" style="height:59px"><div  style="padding-right:0px;padding-left:0px;text-align:center;color:grey;padding-top:20px" ><span onclick="javascript:getMoreReport()" class="mui-navigate-right">点击加载更多</span></div></li>'
								
							f.innerHTML=li;
							document.getElementById("a123").addEventListener("tap",getMoreReport);
							if(lengt>7){
								document.getElementById("getmore").style.display="";
							}
							getechars();
						} else {
							f.innerHTML = "暂无数据"+resultdata.length;
						}
					} else {
						f.innerHTML = "请求出错!";
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					f.innerHTML = "error";
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}
			});
			}
			function getechars(){
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {
					calculable: false,
				} : {
					legend: {
						data: ['油耗','里程', '百公里油耗']
					},
					grid: {
						x: 50,
						x2: 60,
						y: 50,
						y2: 25
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: false
							},
							dataView: {
								show: false,
								readOnly: false
							},
							magicType: {
								show: false,
								type: ['line', 'bar']
							},
							restore: {
								show: false
							},
							saveAsImage: {
								show: false
							}
						}
					},
					calculable: false,
					xAxis: [{
						type: 'category',
						data: [workdatearr[0],workdatearr[1],workdatearr[2],workdatearr[3],workdatearr[4],workdatearr[5],workdatearr[6]],
						splitLine:{
							show:false
						}
					}],
					yAxis: [{
						type: 'value',
						name: '油耗/里程',
						min: 0,
						axisLabel: {
							formatter: '{value}'
						},
						splitLine:{
							show:false
						}
					}, 
					
					{
						type: 'value',
						name: '百公里油耗',
						min: 0,
						max: 100,
						axisLabel: {
							formatter: '{value}'
						},
						splitLine:{
							show:false
						}
					}],
					series: [
						{
							name: '油耗',
							type: 'bar',
							//data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
							data: [iolarr[0],iolarr[1],iolarr[2],iolarr[3],iolarr[4],iolarr[5],iolarr[6]],
							itemStyle: {  
		                        normal: {  
		                            label: {  
		                                show: true/*,//是否展示  
		                                textStyle: {  
		                                    fontWeight:'bolder',  
		                                    fontSize : '10',  
		                                    fontFamily : '宋体',  
		                                }  */
		                            }  
		                        }  
                   			 },
						},
						{
							name: '里程',
							type: 'bar',
							//data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
							data: [workrunkmarr[0],workrunkmarr[1],workrunkmarr[2],workrunkmarr[3],workrunkmarr[4],workrunkmarr[5],workrunkmarr[6]],
							itemStyle: {  
		                        normal: {  
		                            label: {  
		                                show: true/*,//是否展示  
		                                textStyle: {  
		                                    fontWeight:'bolder',  
		                                    fontSize : '10',  
		                                    fontFamily : '宋体',  
		                                }  */
		                            }  
		                        }  
                   			 },
						},
						{
							name: '百公里油耗',
							type: 'line',
							yAxisIndex: 1,
							//data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
							data: [perworkharr[0],perworkharr[1],perworkharr[2],perworkharr[3],perworkharr[4],perworkharr[5],perworkharr[6]],
							itemStyle: {  
		                        normal: {  
		                            label: {  
		                                show: true/*,//是否展示  
		                                textStyle: {  
		                                    fontWeight:'bolder',  
		                                    fontSize : '10',  
		                                    fontFamily : '宋体',  
		                                }  */
		                            }  
		                        }  
                   			 },
						}
					]
				};
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			var barChart = echarts.init(byId('barChart'));
			
				barChart.setOption(getOption('bar'));
				//document.getElementById("dd").innerHTML=da;
			}
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh,
						auto:true
					}
				
				}
			});
			var count = 0;
			
			function getMoreReport() {
				var li="";
				mui.ajax('../../../APP/moreVclLogbook', {
					data: {
						param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclId":"' + vclid + '"}}'
					},
					dataType: 'jsonp', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var jsonObj = window.JSON.parse(data);
						if (jsonObj.resultCode == "1") {
							//获取返回数据的data
							var resultdata = jsonObj.data
							jsondata = jsonObj.data;
							for (var i =0; i < jsondata.length; i++) {
								
							li+= '<li style="padding-right:0px" class="mui-table-view-cell mui-media" id="'+jsondata[i].workdate+'">';
							li+='<img style="height:37px;width:37px" class="mui-media-object mui-pull-right" name="b123" date-option="0" id="a_'+jsondata[i].workdate+'"  src="../../images/drawable-hdpi/select_gray.png"  />'
							li+='<div class="mui-media-body" >'
							li+='<P style="font-size: 14px;line-height:18px">'+jsondata[i].workdate+'&nbsp;&nbsp;&nbsp;&nbsp;'+jsondata[i].peroil+'L/100Km</P>'
							li+='<P style="font-size: 14px;line-height:18px"> 里程:'+jsondata[i].runkm+"km&nbsp;&nbsp;&nbsp;油耗量："+jsondata[i].vcloil+'L</P>'
							li+='</div>'
							li+='</li>';
							}
						}
						f.innerHTML=li;
						document.getElementById("navid").style.display="none";
						pkid=new Array();//选择的设备id,
					}
			});
			}
			/*/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					 iolarr=new Array();
	        		 workrunkmarr=new Array();
	        		 perworkharr=new Array();
	        		 workdatearr=new Array();
	        		 pkid=new Array();//选择的设备id,
	        		 document.getElementById("navid").style.display="none";
					getreport();
				}, 3000);
			}
			function close123(obj){
				mui.closePopup();
			}
			mui("#pullrefresh").on("tap","li",function(){
				var dates=this.getAttribute("id");
				var name=this.getAttribute("name");
				if("a123"==dates){
					return;
				}
				if("b123"==name){
					return;
				}
				mui.ajax('../../../APP/vclInfoMaint', {
					data: {
						param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclId":"' + vclid + '","type":"0"}}'
					},
					dataType: 'jsonp', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 100000, //超时时间设置为10秒；
					success: function(data) {
						var jsonObj = window.JSON.parse(data);
						if (jsonObj.resultCode == "1") {
							//获取返回数据的data
							var btnArray = ['<div style="font-size:17px">添加关注</div>','车辆详情','添加对比'];
							var message='<div style="text-align:left"><p>生产厂家:'+removeNull(jsonObj.data.facname)+'<p><p>驱动类型:'+removeNull(jsonObj.data.drivetype)+'</p><p>设备型号:'+removeNull(jsonObj.data.vcltype)+'</p><p>发动机型号:'+removeNull(jsonObj.data.esntype)+'</p><div>';
							var title='<p><span style="font-weight:bolder;color:#000000;font-size:20px">'+jsonObj.data.vclnum+'</span><a style="float:right;font-size:16px" id="aa123" onclick="close123(this)">关闭</a></p>';
							
							mui.confirm(message, title, btnArray, function(e) {
								if(e.index==-1){//关注
											//ajax请求关注接口
											mui.ajax('../../../APP/atnFtn', {
												data: {
													param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclId":"'+vclid+'","type":"1"}}'
												},
												dataType: 'jsonp', //服务器返回json格式数据
												type: 'post', //HTTP请求类型
												timeout: 10000, //超时时间设置为10秒；
												success: function(data) {
													var jsonObj = window.JSON.parse(data);
													if (jsonObj.resultCode == "1") {
														mui.toast("成功");
													}else if(jsonObj.resultCode == "116"){
														mui.toast("已超出关注车辆数");
													}else if(jsonObj.resultCode == "212"){
														mui.toast("此台车已经被关注");
													} else {
														mui.toast("失败");
													}
												},
												error: function(xhr, type, errorThrown) {
													}
											});
								}else if (e.index == 1) {//车辆详情
									window.webkit.messageHandlers.reportVclDetail.postMessage(vclid+"_"+jsonObj.data.vclnum);
								} else if(e.index ==2) {//添加对比
									mui.ajax('../../../APP/anayList', {//添加对比
											data: {
												param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"type":"2","vclId":"'+vclid+'","beTime":"' + dates + '","endTime":"' + dates + '"}}'
											},
											dataType: 'jsonp', //服务器返回json格式数据
											type: 'post', //HTTP请求类型
											timeout: 10000, //超时时间设置为10秒；
											success: function(data) {
												var jsonObj = window.JSON.parse(data);
												if (jsonObj.resultcode == "1") {
													mui.toast("添加成功");
												} else if(jsonObj.resultcode == "122") {
													mui.toast("添加失败,最多可添加20台");
												}else if(jsonObj.resultcode == "123"){
													mui.toast("添加失败,此条记录已存在，不能再添加");
												}
											},
											error: function(xhr, type, errorThrown) {
												//document.getElementById("test").innerHTML="err";
											}
										});
								}else{//关闭
									
								}
							});
						} else {
							mui.toast(jsonObj.resultCode)
						}
					},
					error: function(xhr, type, errorThrown) {
						mui.toast("err")
					}
				});
			});
			mui("#pullrefresh").on("tap","img",function(e){
									//e.cancelBubble=true;
									e.stopPropagation();//阻止冒泡
									var srcPath=this.getAttribute("date-option");
									var dateTimeString=this.getAttribute("id").split("_")[1];
									if(srcPath=="0"){//灰色-置红
										this.setAttribute("date-option","1");
										this.setAttribute("src","../../images/drawable-xxhdpi/select_red.png");
										if(pkid.length==2){//将第一个顶掉
											document.getElementById("a_"+pkid[0]).setAttribute("src","../../images/drawable-xxhdpi/select_gray.png");
											document.getElementById("a_"+pkid[0]).setAttribute("date-option","0");
											var newpkId=new Array();
											newpkId[0]=pkid[1];
											newpkId[1]=dateTimeString;
											pkid=newpkId;
										}else{
											pkid[pkid.length]=dateTimeString;
										}
									}else{
										this.setAttribute("date-option","0");
										this.setAttribute("src","../../images/drawable-xxhdpi/select_gray.png");
										if(pkid.length==1){
											pkid=new Array();
										}else if(pkid.length==2){//减去一个
											var vclidclo=dateTimeString;
											if(pkid[0]==vclidclo){
												pkid[0]=pkid[1];
												pkid.splice(1,1);//删除数组中的某个元素
											}else if(pkid[1]==vclidclo){
												pkid.splice(1,1);//删除数组中的某个元素
											}
										}
										
									}
									if(pkid.length>0){
										document.getElementById("navid").style.display="block";
										//给a标签附连接
										document.getElementById("navid").addEventListener("tap",Begincompare,false);
									}else{
										document.getElementById("navid").style.display="none";
										}
									});
	function Begincompare(){
	  if(pkid.length==2){
		/*mui.openWindow("../expert/vclcompare.html?accountid="+accountid+"&sessionid="+sessionid+"&proversion="+proversion+"&param="+pkid[0]+"_"+document.getElementById("dateSelector").value+","+pkid[1]+"_"+document.getElementById("dateSelector").value,"vclcomparea.html")*/
		window.webkit.messageHandlers.workLogcompare.postMessage("2_"+vclid+"_"+pkid[0]+"_"+pkid[0]+","+vclid+"_"+pkid[1]+"_"+pkid[1]);
		}else{
		window.webkit.messageHandlers.workLogcompare.postMessage("1_"+vclid+"_"+pkid[0]+"_"+pkid[0]);
		/*mui.openWindow("../expert/vclcompare.html?accountid="+accountid+"&sessionid="+sessionid+"&proversion="+proversion+"&param="+pkid[0]+"_"+document.getElementById("dateSelector").value,"vclcomparea.html")*/
		}
	  }
		</script>
	</body>

</html>